
<template>
    <div>
        <my-bar
            :width="width"
            :height="height"
            :title="title"
            :xaxis="xaxis"
            :series="series"
            :legend="legend"
        ></my-bar>
        <button @click="changeSize">change size</button>
        
    </div>
</template>
<script>
import Bar from "./bar.vue";

const { info } = console;

export default {
    data() {
        return {
            width: "600px",
            height: "200",
            title: "echarts柱图",
            xaxis: {data:["衬衫1", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},
            series: [
                {
                    name: "销量1",
                    type: "bar",
                    data: [15, 20, 36, 10, 10, 20],
                },
            ],
            legend: {
                data: [
                    "销量1",
                    "销量2",
                   
                ],
            },
        };
    },
    updated() {},
    methods: {
        changeSize() {
            this.width = "800px";
            this.height = "100%";
        },
    },
    components: {
        "my-bar": Bar,
    },
};
</script>
